<template>
<div class="listperson">
    <aside class="list">
    <form action="">
        <table border="1" cellpadding='1' cellspacing='1'>
            <tr align="center">
                <th>序号</th>
                <th>姓名</th>
                <th>性别</th>
                <th>年龄</th>
                <th>职务</th>
                <th>薪资</th>
                <th>入职时间</th>
                <th>操作</th>
            </tr>
            <tr v-for="(item,index) in SelectVuex" :key="index">
                <td>{{index+1}}</td>
                <td>{{item.uname}}</td>
                <td>{{item.newGender}}</td>
                <td>{{item.age}}</td>
                <td>{{item.newPort}}</td>
                <td>{{item.salary}}</td>
                <td>{{item.ctime}}</td>
                <td>
                    <button @click="goEdit(index)">编辑</button>
                    <button @click="del(index)">删除</button>
                </td>
            </tr>
        </table>
    </form>
    </aside>
</div>
</template>

<script>
import { mapMutations, mapState } from 'vuex';

export default {
    name : 'ListPerson',
    // 事件函数，需要触发的
    methods:{
    ...mapMutations(['dellist']),
        // 删除函数
        del(index){
            this.dellist(index);
        },
        goEdit(index){
            console.log(index);
            this.$router.push('/editperson?i='+index);
        }
    },
    // 计算属性内部的函数是自动执行且可以作为数据循环
    computed:{
        // 获取vuex的state内部的数据
        ...mapState(['plist']),
        // 如果不用快捷方法：this.$router.state.plist

        // 对数据进行加工
        SelectVuex(){
            // 备份
            let plist = this.plist;
            // 遍历，数据加工
                
            for(let item of this.plist){
                item.newGender = item.gender == 0 ? '女' : '男';
                //一个变量多种可能
                switch(item.port){
                    case 1:item.newPort = '老板';break;
                    case 2:item.newPort = '总经理';break;
                    case 3:item.newPort = '部门主管';break;
                    case 4:item.newPort = '组长';break;
                    case 5:item.newPort = '员工';break;
                } 
                }
                // 新数据导出
                 return plist;
            }
        }
    }

</script>

<style scoped>
.listperson{
    background-color: brown;
    height: 90vh;
    display: flex;
    justify-content: center;
    flex-direction: column;
}
.list{
    display: flex;
    justify-content: center;
    align-content: center;
}
form{
    width: 80%;
}
.list table{
    width: 100%;
    border: 1px white;
    height: 35vh;
}
</style>